import React, {Component} from 'react';

class Register extends Component {

    /*在react里面收集表单信息有如下几步：
    *
    * */
    constructor(props) {
        super(props);

        /*
        * react表单收集的第一步：
        *
        * 在state里面初始化相关的数据信息
        * */
        this.state = {
            username: '',
            password: '',
            repassword: '',
        }

    }

    usernameHandler = (e) => {
        this.setState({
            username: e.target.value,
        })
    }

    passwordHandler = (e) => {
        this.setState({
            password: e.target.value,
        })
    }

    repasswordHandler = (e) => {
        this.setState({
            repassword: e.target.value,
        })
    }


    registerhandler = (e) => {
        e.preventDefault(); // 阻止默认事件，然后我们使用ajax进行异步提交
        console.log('registerhandler');
        console.log(this.state);
    }

    render() {
        return (
            <div>
                <h1>注册组件-页面级别</h1>
                <p>
                    在react 里面，表单控件的 value 如果是收到组件的 state 进行控制，只有 state 变化了，表单控件的value才能变化，那么这样的组件我们称之为 受控组件。
                </p>
                {/* react表单收集的第二步：将表单控件的 value 和 state 里面的属性形成绑定关系*/}
                <form action="">
                    <div>
                        {/*
                        react-dom.development.js:67 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
                        如果我们将 表单控件的 value 和 state 绑定后，如果不为表单控件添加 onChange事件，则表单控件仅仅是可读的，没办法获取用户的输入信息。
                        */}
                        {/*react表单收集的第三步： 需要在表单控件上面 定义onChange事件，来获取用户输入的内容，然后将输入的内容赋值到 state 上面*/}
                        用户名：<input type="text" value={this.state.username} onChange={this.usernameHandler}/>
                    </div>
                    <div>
                        密码：<input type="password" value={this.state.password} onChange={this.passwordHandler}/>
                    </div>
                    <div>
                        确认密码：<input type="password" value={this.state.repassword} onChange={this.repasswordHandler}/>
                    </div>
                    <div>
                        <button onClick={this.registerhandler}>注册</button>
                    </div>
                </form>
            </div>
        );
    }
}

export default Register;
